<route lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '资讯组件',
  },
}
</route>

<template>
  <view class="">
    <navigator :url="`/pages/new-detail/new-detail?id=${item.id}`">
      <view class="news-card flex bg-white px-20rpx py-12rpx">
        <view class="mr-20rpx" v-if="item.image">
          <wd-img :src="item.image" height="100" width="120"></wd-img>
        </view>
        <view class="news-card-content flex flex-col justify-between flex-1">
          <view class="news-card-content-title text-base">{{ item.title }}</view>
          <view class="news-card-content-intro text-gray-400 text-sm mt-16rpx">
            {{ item.desc }}
          </view>

          <view class="text-muted text-xs w-full flex justify-between mt-12rpx">
            <view>{{ item.create_time }}</view>
            <view class="flex items-center">
              <image src="/static/images/icon/icon_visit.png" class="w-30rpx h-30rpx"></image>
              <view class="ml-10rpx">{{ item.click }}</view>
            </view>
          </view>
        </view>
      </view>
    </navigator>
  </view>
</template>

<script lang="ts" setup>
import { wenzhangliebiaoVo } from '@/api/types'
const props = defineProps({
  item: {
    type: Object as PropType<wenzhangliebiaoVo>,
    required: true,
  },
}) as { item: wenzhangliebiaoVo }

const item = props.item
</script>

<style lang="scss" scoped>
.news-card {
  border-bottom: 1px solid #f8f8f8;
  &-content {
    &-title {
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
    &-intro {
      display: -webkit-box;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
    }
  }
}
</style>
